<template>
  <div class="yongjinzhichu">
    <!-- <div class="powertop">
      <router-link class="powertopli " to="/yongjinzhichu/zhichuguanli" v-if="checkquanxian('V0201').length > 0">支出订单管理</router-link>
      <router-link class="powertopli " to="/yongjinzhichu/yongjinzhichu" v-if="checkquanxian('V0202').length > 0">佣金支出</router-link>
      <router-link class="powertopli powertopact" to="/yongjinzhichu/zhichudakuanshenhe" v-if="peizhi.second_commission_examine && checkquanxian('V0204').length > 0">支出审核</router-link>
      <router-link class="powertopli " to="/yongjinzhichu/zhichudakuan" v-if="checkquanxian('V0203').length > 0">支出打款</router-link>

      <router-link class="powertopli" to="/yongjinzhichu/zhichupeizhi"  v-if="zhichupeizhi">支出配置</router-link>
      <router-link class="powertopli " to="/yongjinzhichu/yongjinzhichubaobiao" v-if="checkquanxian('V0205').length > 0">佣金支出报表</router-link>
    </div> -->
    <top2></top2>
    <div v-loading='loading' style="padding: 20px;">

          <div class="kflexc" style="margin-bottom: 20px;">
            <el-select clearable v-model="all.merchant_name"  style="width: 220px; margin-right: 20px;" filterable placeholder="选择分销商">
              <el-option :label="item.name" :value="item.child_shop_id"  v-for="item in fenxiaoshanglists" :key="item.child_shop_id" ></el-option>
            </el-select>

            <el-select  v-model="all.cm_name" style="width: 220px; margin-right: 20px;" placeholder="选择客户经理" filterable clearable>
              <el-option :label="item.name" :value="item.id"  v-for="item in kehujinglilists" :key="item.id" ></el-option>
            </el-select>

            <el-button type="danger" round  style="margin-right: 20px;" @click="search()">检索</el-button>

          </div>

          <div style="margin-bottom: 20px;">
            <el-button type="danger" round style="margin-right: 20px;" @click="zhichuduo()">确认支出</el-button>
          </div>



          <el-table :data="list" show-summary border style="width: 100%; margin: 20px 0;" @selection-change="handleSelectionChange">
            <el-table-column  type="selection" width="55"></el-table-column>

            <el-table-column align='center' prop='merchant_name' label="分销商"></el-table-column>
            <el-table-column align='center' prop='orders_count' label="待核算订单"></el-table-column>
            <el-table-column align='center' prop='daihesuan' label="待核算金额">

            </el-table-column>


            <el-table-column align='center' prop='manager_name' label="客户经理"></el-table-column>


            <el-table-column align='center' label="操作">
              <template slot-scope="scope">
                <div class="kflexc">

                  <div style="color: #409EFF; margin: 10px; cursor: pointer;" @click="xiazai(scope.row)">下载明细</div>
                  <div style="color: #409EFF; margin: 10px; cursor: pointer;" @click="querenzhichugo2(scope.row)">审核通过</div>

                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size" :total="total"></el-pagination>



    </div>
  </div>
</template>

<script>
  import top2 from './top.vue'
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import moment from "moment";
  import XLSX from 'xlsx';

  import {
      read,utils
    } from 'xlsx'

  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
      top2
    },
    name: "yongjinzhichu",
    data() {
      return {
        list:"",
        all:{
          page:1,
          page_size:20,
          merchant_name:"",
          cm_name:"",
          status:60
        },
        total:0,
        loading:true,
        fenxiaoshanglists:[],
        kehujinglilists:[],
        dangqianxuanzhong:[],
        peizhi:"",
        zhichupeizhi:false

      }
    },
    created() {
      if(JSON.parse(localStorage.getItem('USER')).id == JSON.parse(localStorage.getItem('SHOP')).shop_id){
        this.zhichupeizhi = true
      }
      this.getlist()

      //获取全部分销商
      axios.get('/api/gth/partner/list?page_size=2000')
        .then(response => {
          if (response.data.msg.code == 0) {
            this.fenxiaoshanglists = response.data.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      //获取客户经理
      axios.get('/api/plan-market/user/userManagerList')
        .then(response => {
          if (response.data.msg.code == 0) {
             this.kehujinglilists = response.data.data
          } else {
             this.$message.error(response.data.msg.info);
          }
      })
      // axios.get('/api/plan-market/expend/shopConfigInfo')
      //   .then(response => {
      //     if (response.data.msg.code == 0) {
      //       this.peizhi = response.data.data

      //     } else {
      //       this.$message.error(response.data.msg.info);
      //     }
      // })

    },
    mounted() {

    },
    methods: {
      xiazai: function(item) {
        axios.post('/api/plan-market/expend/pool/exp',{id:item.id})
          .then(response => {
            if (response.data.msg.code == 0) {
              location.href = location.origin + '/' + response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      zhichuduo:function(){
        if(this.dangqianxuanzhong.length == 0){
          this.$message.success('请先选择要审核的');
          return
        }
        let arr = []
        this.dangqianxuanzhong.forEach(item=>{
          arr.push(item.id)
        })
        axios.post('/api/plan-market/expend/pool/second',{
          id:arr.toString()
        })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('操作成功');
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      handleSelectionChange(val) {
        this.dangqianxuanzhong = val;
      },

      querenzhichugo2:function(item){
        axios.post('/api/plan-market/expend/pool/second',{
          id:item.id
        })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('操作成功');
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      search: function(val) {
        this.all.page = 1
        this.getlist()
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.all.page = page
        this.getlist()
      },
      //获取列表
      getlist: function() {
        axios.get('/api/plan-market/expend/pools',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.list.forEach(item=>{
                this.$set(item,'daihesuan',parseFloat(item.sum_commission)  + parseFloat(item.adjust_commission))
              })

              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .yongjinzhichu {

    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }
    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }

  }
</style>
